<template>
	<div class="org">
		<div class="form">
			<div class="keyword">
				<el-input v-model="form.keyword" @keyup.enter.native="onEnterSubmit" placeholder="请输入名字/手机号/证件号关键字进行搜索" clearable></el-input>
			</div>
			<div class="search"><el-button type="primary" @click="onSubmit">搜索</el-button></div>
		</div>
		<div class="line"></div>
		<div class="orgTable">
			<el-table :data="tableData" stripe style="width: 80%">
        <el-table-column prop="user_id" label="USER_ID" width="100"></el-table-column>
				<el-table-column prop="name" label="姓名" width="100"></el-table-column>
				<el-table-column prop="" label="性别" width="60">
					<template slot-scope="scope">
						<span v-if="scope.row.sex == 0">男</span>
						<span v-if="scope.row.sex == 1">女</span>
					</template>
				</el-table-column>
				<el-table-column prop="date_of_birth" label="出生年月" width="120"></el-table-column>
				<el-table-column prop="phone" label="手机号码" width="120"></el-table-column>
				<el-table-column prop="id_card" label="证件号码" width="180"></el-table-column>
				<el-table-column prop="" label="操作">
					<template slot-scope="scope">
						<span class="operation" @click="userinfo(scope.$index, scope.row)">个人信息</span>
						<span class="operation" @click="competitioninfo(scope.$index, scope.row)">参赛信息</span>
						<span class="operation" @click="count(scope.$index, scope.row)">技术统计</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				@current-change="ChangePage"
				style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;"
			></el-pagination>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			form: {
				keyword: '',
				state: ''
			},
			tableData: [],
			total: null,
			currentPage: 1
		};
	},
	created() {
		this.get_allclub();
	},
	methods: {
		onSubmit() {
			this.get_allclub();
		},
		onEnterSubmit() {
			this.get_allclub();
		},
		get_allclub() {
			this.$axios
				.get('/UserManage/user_list', {
					params: {
						search: this.form.keyword,
						page: this.currentPage,
						type: 0,
						status: ''
					},
					headers: {
						token: window.sessionStorage.getItem('token')
					}
				})
				.then(res => {
					if (res.data.code == 2000) {
						this.tableData = res.data.data.list;
						this.total = res.data.data.count;
					}
				})
				.catch(error => {
					console.log(error);
				});
		},
		ChangePage(page) {
			this.currentPage = page;
			this.get_allclub();
		},
		userinfo(index, row) {
			this.$router.push({
				path: '/Index/User/playerIndex',
				query: {
					playerId: row.user_id,
					playerIdTab: 'playerInfo'
				}
			});
		},
		competitioninfo(index, row) {
			this.$router.push({
				path: '/Index/User/playerIndex',
				query: {
					playerId: row.user_id,
					playerIdTab: 'competitioninfo'
				}
			});
		},
		count(index, row) {
			this.$router.push({
				path: '/Index/User/playerIndex',
				query: {
					playerId: row.user_id,
					playerIdTab: 'count'
				}
			});
		}
	}
};
</script>
<style lang="less" scoped>
.org {
	margin-top: 36px;

	.form {
		display: flex;
		margin-left: 26px;
		margin-bottom: 12px;

		.keyword {
			width: 410px;
			display: flex;
			align-items: center;
			margin-left: 23px;
		}

		.state {
			width: 200px;
		}

		.search {
			width: 123px;
			text-align: right;
		}
	}

	.line {
		width: 80%;
		/*height: 0.5px;*/
		border-top: 1px #dcdfe6 dotted;
	}

	.orgTable {
		margin-top: 34px;
		margin-left: 40px;
	}
}

.ogg {
	color: #ff9800;
}

.green {
	color: #259b24;
}

.red {
	color: red;
}

.operation {
	color: #409eff;
	cursor: pointer;
}
</style>
